
<template>
  <div class="app-container">
    <el-button
      @click="() => append({})"
      type="primary"
      size="mini"
      style="margin:10px 0"
    >添加分类</el-button>
    <el-button
      @click="() => getData()"
      type="primary"
      size="mini"
      style="margin:10px 0 0 20px"
    >刷新数据</el-button>
    <el-tree
      :data="list"
      empty-text="暂无数据"
      node-key="id"
      :expand-on-click-node="false"
    >
      <span
        class="custom-tree-node"
        slot-scope="{ node, data }"
      >
        <span>{{ node.label }}</span>
        <span>
          <el-button
            type="text"
            size="mini"
            @click="() => append(data)"
          >
            <span class="txt-success">
              添加

            </span>
          </el-button>
          <el-button
            type="text"
            size="mini"
            @click="() => edit(node,data)"
          >
            <span class="txt-warning">
              编辑
            </span>
          </el-button>
          <el-button
            type="text"
            size="mini"
            @click="() => remove(node, data)"
          >
            <span class="txt-danger">
              删除
            </span>
          </el-button>
        </span>
      </span>
    </el-tree>
  </div>
</template>

<script>
let id = 1000;
import api from "@/api/index";
import { getTreeData } from "@/utils/tree";
export default {
  data() {
    const data = [
      {
        id: 1,
        label: "一级 1",
        children: [
          {
            id: 4,
            label: "二级 1-1",
            children: [
              {
                id: 9,
                label: "三级 1-1-1"
              },
              {
                id: 10,
                label: "三级 1-1-2"
              }
            ]
          }
        ]
      },
      {
        id: 2,
        label: "一级 2",
        children: [
          {
            id: 5,
            label: "二级 2-1"
          },
          {
            id: 6,
            label: "二级 2-2"
          }
        ]
      },
      {
        id: 3,
        label: "一级 3",
        children: [
          {
            id: 7,
            label: "二级 3-1"
          },
          {
            id: 8,
            label: "二级 3-2"
          }
        ]
      }
    ];
    return {
      apiDefault: "category",
      params: {
        platform: 0
      },
      list: [],
      data: JSON.parse(JSON.stringify(data))
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      var func = this.apiDefault + "Index";
      api[func](this.params).then(res => {
        console.log(res);
        this.list = getTreeData(res.result);
      });
    },
    append(data) {
      console.log(data.id);
      this.$router.push({
        path: "create",
        query: { id: data.id, title: data.label }
      });
    },
    edit(node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      this.$router.push({
        path: "edit/" + data.id,
        query: { title: parent.label }
      });
    },
    remove(node, data) {
      if (data.children && data.children.length > 0) {
        this.$message.error("错了哦，请先删除子分类后");
        return;
      }
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex(d => d.id === data.id);
      this.$confirm("此操作删除该分类, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          children.splice(index, 1);
          var func = this.apiDefault + "Remove";
          api[func]({ id: data.id }).then(res => {
            if (res.code == 200) {
              this.$message({
                message: "恭喜你，删除成功",
                type: "success"
              });
            } else {
              this.$message({
                type: "info",
                message: "删除失败"
              });
              this.getData();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>

<style>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>